<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue 模板语法</title>
		<script src="../js/vue.min.js"></script>
		<style>
			.class1{
				background: #444;
				color: #eee;
			}
		</style>
	</head>
	<body>
		<!-- -文本插值 -->
		<div id="app">
			<p>{{message}}</p>
		</div>
		<script>
			new Vue({
				el:'#app',
				data:{
					message:'Hello 方丈!'
				}
			})
		</script>
		<p>---------------</p>
		<!-- v-html 指令 -->
		<div id="app1">
			<div v-html="message"></div>
		</div>
		<script>
			new Vue({
				el:'#app1',
				data:{
					message:'<h1>快手教程</h1>',
				}
			})
		</script>
		<p>----------------</p>
		<!-- v-bind 指令 -->
		<div id="app2">
			<label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1"/>
			<br /><br />
			<div v-bind:class="{'class1':use}">
				v-bind:class 指令
			</div>
		</div>
		<script>
			new Vue({
				el:'#app2',
				data:{
					use:false
				}
			});
		</script>
		<p>---------------------------</p>
		<!-- JavaScript 表达式 -->
		<div id="app3">
			{{5+5}}<br />
			{{ ok ? 'YES' : 'NO' }}<br />
			{{message.split('').reverse().join('')}}
			<div v-bind:id="'list-' + id">快手教程</div>
		</div>
		<script>
			new Vue({
				el:'#app3',
				data:{
					ok:true,
					message:'ks',
					id:1
				}
			})
		</script>
		<p>--------------</p>
		<!-- 指令 -->
		<div id="app4">
			<p v-if="seen">哎，你的电瓶不见了</p>
			<template v-if="ok">
				<h1>快手教程</h1>
				<p>学的不仅仅是开直播，还会喊双击加关注!</p>
				<p>兄弟们，666扣起来!!!</p>
			</template>
		</div>
		<script>
			new Vue({
				el:'#app4',
				data:{
					seen:true,
					ok:true
				}
			})
		</script>
		<p>-------------------</p>
		<!-- 参数 -->
		<div id="app5">
			<pre> <a v-bind:href="url">菜鸟教程</a> </pre>
		</div>
		<script>
			new Vue({
				el:'#app5',
				data:{
					url:'http://www.runoob.com'
				}
			})
		</script>
		<p>------------------</p>
		<!-- 双向数据绑定 -->
		<div id="app6">
			<p>{{message}}</p>
			<input v-model="message" />
		</div>
		<script>
			new Vue({
				el:'#app6',
				data:{
				  message:'Runoob!'
				}
			})
		</script>
		<p>---------------------------------------------------------</p>
		<!-- 字符串反转 -->
		<div id="app7">
			<p>{{message}}</p>
			<button v-on:click="reverseMessage">反转字符串</button>
		</div>
		<script>
			new Vue({
				el:'#app7',
				data:{
					message:'王王王'
				},
				methods:{
					reverseMessage:function(){
						this.message = this.message.split('').reverse().join('')
					}
				}
			})
		</script>
		<p>---------------------------------------------------------</p>
		<!-- 过滤器 -->
		<body>
<div id="app8">
  {{ message | capitalize }}
</div>
	
<script>
new Vue({
  el: '#app8',
  data: {
	message: 'runoob'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
</script>
	</body>
</html>
